<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>带界面工资计算器</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        #outer{
            width: 319px;
            height: 540px;
            margin: 0 auto;
            border: 1px solid #999; 
            background-color: rgb(250,250,250);  
            overflow-y: scroll; 

        }
        nav{
            width: 300px;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
            text-align: center;
            background-color: rgb(51,128,191);
            color: white;
        }
        #section{
            width: 300px;
            margin: 0 auto;
            padding: 8px;
            /*border: 1px solid #000; */
        }
        input{
            width: 280px;
            height: 40px;
            margin: 10px 0;
            border: 1px solid #aaa;
            border-radius: 5px;
            padding-left: 10px;
        }
        input:hover{
            border-color: rgb(51,128,191);
        }
        input:focus{
            box-shadow: 0 0 2px 2px rgb(77,170,245) inset;
        }
        #btn{
            width: 280px;
            height: 40px;
            background-color: #999;
            color: white;
            border: none;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        #main{
            width: 285px;
            margin: 10px auto;
            /*border: 1px solid black;*/
            display: none;
        }
        .item{
            display: flex;
            justify-content: space-between;
            margin: 15px 5px;
        }
        .item-right{
            color: red;
        }
        .item-right::before{
            content: "￥";
        }
        .item-right.loss:before{
            content: "-￥";
        }
        #tips{
            color: #999;
            text-align: center;
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <nav>工资计算器</nav>

        <div id="section">
            <input id="first" class="" type="text" placeholder="基本工资" oninput="edit(event)">
            <input id="second" type="text" placeholder="绩效" oninput="edit(event)">
            <input id="third" type="text" placeholder="奖金" oninput="edit(event)">
            <button id="btn" disabled onclick="btnClick(event)">计 算</button>
            <p id="tips">输入数字小于2000不能计算</p>
        </div>

        <div id="main">
            <div class="item">
                <div class="item-left">总工资</div>
                <div class="item-right" id="sum">￥</div>
            </div>
            <div>
                <hr>
            </div>
            <div class="item">
                <div class="item-left">养老 8%</div>
                <div class="item-right loss" id="old">-￥</div>
            </div>
            <div class="item">
                <div class="item-left">医疗 2%</div>
                <div class="item-right loss" id="cure">-￥</div>
            </div>
            <div class="item">
                <div class="item-left">失业 0.5%</div>
                <div class="item-right loss" id="lose">-￥</div>
            </div>
            <div class="item">
                <div class="item-left">工伤 0%</div>
                <div class="item-right loss"> 0.00</div>
            </div>
            <div class="item">
                <div class="item-left">生育 0%</div>
                <div class="item-right loss"> 0.00</div>
            </div>
            <div class="item">
                <div class="item-left">公积金 8%</div>
                <div class="item-right loss" id="fund">-￥</div>
            </div>
            <div class="item">
                <div class="item-left">税前工资</div>
                <div class="item-right" id="tax-before">￥</div>
            </div>
            <div class="item">
                <div class="item-left">个人所得税</div>
                <div class="item-right loss" id="tax">-￥</div>
            </div>
            <div>
                <hr>
            </div>
            <div class="item">
                <div class="item-left">税后工资</div>
                <div class="item-right" id="tax-after">￥</div>
            </div>
        </div>

    </div>
</body>

<script>

    var input1 = document.getElementById("first");
    var input2 = document.getElementById("second");
    var input3 = document.getElementById("third");
    
    var sum = document.getElementById("sum");
    var old = document.getElementById("old");
    var cure = document.getElementById("cure");
    var lose = document.getElementById("lose");
    var fund = document.getElementById("fund");
    var taxBefore = document.getElementById("tax-before");
    var tax = document.getElementById("tax");
    var taxAfter = document.getElementById("tax-after");
    
    var tips = document.getElementById("tips");


    var btn = document.getElementById("btn");
    var main = document.getElementById("main");



    function edit(e){
        var num = input1.value*1 + input2.value*1 + input3.value*1;

        if(num<=2000){
            btn.disabled = true;
            btn.style.backgroundColor = "#999";
            btn.style.cursor = "default";
            main.style.display = "none";
            tips.style.display = "block";
        }else{
            btn.disabled = false ;
            btn.style.backgroundColor = "rgb(51,128,191)";
            btn.style.cursor = "pointer"; 
            tips.style.display = "none";
        }
    }



// -----------------------------------------------------------------

        
    function btnClick(){

        var num = input1.value*1 + input2.value*1 + input3.value*1;
        
        if(num>=2000){
            main.style.display = "block";
        }else{
            main.style.display = "none";
        }


        sum.textContent =  num.toFixed(2);

        var oldNum = num*0.08;                
        old.textContent =  oldNum.toFixed(2);


        var cureNum = num*0.02;                
        cure.textContent = cureNum.toFixed(2);

        var loseNum = num*0.005;               
        lose.textContent =  loseNum.toFixed(2);

        var fundNum = num*0.08;               
        fund.textContent =  fundNum.toFixed(2);

        var taxBeforeNum = num - oldNum - cureNum - loseNum - fundNum;                    
        taxBefore.textContent = taxBeforeNum.toFixed(2);

// ---------------------------------------------------------------------


        if(taxBeforeNum<=3500){
            var taxNum = 0;            
        }else{
            incomeTax = taxBeforeNum - 3500;
            if(incomeTax<=1500){
                taxNum = incomeTax*0.03;
            }else if(incomeTax<=4500){
                taxNum = incomeTax*0.1-105;         
            }else if(incomeTax<=9000){
                taxNum = incomeTax*0.2-555;
            }else if(incomeTax<=35000){
                taxNum = incomeTax*0.25-1005;
            }else if(incomeTax<=55000){
                taxNum = incomeTax*0.3-2755;
            }else if(incomeTax<=80000){
                taxNum = incomeTax*0.35-5505;
            }else{
                taxNum = incomeTax*0.45-13505;
            }            
        }
          
        tax.textContent = taxNum.toFixed(2);

        
        var taxAfterNum = taxBeforeNum - taxNum;
        taxAfter.textContent = taxAfterNum.toFixed(2);

    }



</script>

</html>